<template>
  <div class="content">

    <div class="add">
      <div class="name">
        <span>联系人</span>
        <input type="text"
               placeholder="你的名字"
               v-model="name">
      </div>
      <div class="sex">
        <p></p>
        <div class="sex_con">
          <i class="iconfont icon-xuanzhong "
             @click="selectAction($event,1)"
             :class="{'selected':selectIndex == 1}">先生</i>
          <i class="iconfont icon-xuanzhong"
             @click="selectAction($event,2)"
             :class="{'selected':selectIndex == 2}">女士</i>
        </div>
      </div>
      <div class="phone">
        <span>联系电话</span>
        <input type="text"
               placeholder="你的手机号"
               v-model="phone">
      </div>
      <div class="address">
        <span>送餐地址</span>
        <input type="text"
               placeholder="小区/写字楼/学校等"
               @click="searchAction"
               v-model="address">
      </div>
      <div class="address_con">
        <span></span>
        <input type="text"
               placeholder="详细地址（如门牌号等）"
               v-model="addressdetail">
      </div>
      <div class="lab">
        <span>标签</span>
        <input type="text"
               placeholder="无/家/学校/公司"
               v-model="tag">
      </div>
    </div>

    <div class="btn">
      <button @click="commitAction">确定</button>
    </div>
  </div>
</template>

<script>
import vm from '../common/bus'
export default {
  name: "AddAddress",
  data () {
    return {
      address: this.$route.params.datas,
      selectIndex: 0,
      name: '',
      sex: '',
      phone: '',
      addressdetail: '',
      tag: '',

    }
  },
  methods: {
    searchAction () {
      this.$router.push({ name: 'SearchAddress' })
    },
    commitAction () {
      // console.log(this.name);
      // console.log(this.sex);
      // console.log(this.phone);
      // console.log(this.address);
      // console.log(this.addressdetail);
      // console.log(this.tag);
      vm.address.push({
        name: this.name,
        sex: this.sex,
        phone: this.phone,
        address: this.address,
        addressdetail: this.addressdetail,
        tag: this.tag
      });
      // console.log(vm.address);
      this.$router.push({ name: 'ChooseAddress' })
    },
    selectAction ($event, n) {
      this.selectIndex = n;
      if (n == 1) {
        this.sex = '先生'
      } else {
        this.sex = "女士"
      }
      // console.log(this.sex);
    }
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}
.add {
  padding: 0 15px;
  background-color: white;

  .name,
  .phone,
  .address,
  .address_con,
  .lab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      display: inline-block;
      width: 30%;
      font-size: 16px;
      color: #333;
    }
    input {
      display: inline-block;
      font-size: 16px;
      width: 70%;
      height: 50px;
      border: none;
      border-bottom: 0.1px solid #f5f5f5;
    }
  }
  .lab {
    margin-bottom: 10px;
  }

  .sex {
    height: 50px;
    display: flex;
    align-items: center;
    p {
      width: 30%;
    }
    i {
      font-size: 16px;
      color: #333;
      margin: 0 10px;
    }
    .selected {
      color: #4cd964;
    }
    label {
      font-size: 16px;
      color: #333;
      margin-right: 20px;
    }
  }
}

.btn {
  margin: 14px 16px;
  button {
    width: 100%;
    background-color: #4cd964;
    font-size: 16px;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    line-height: 45px;
  }
}
</style>